<template>
	<view class="container">
		<topBar style="width: 100%;"></topBar>
		<view class="content flex-cs">
			<view class="nav-bar flex-row flex-cc">
				<view :class="[item.select ? 'nav-item-select' : 'nav-item']" @click="changeNavBar(item.value)" v-for="item in navBarList" :key="item.value">{{ item.label }}</view>
			</view>
			<view class="cover-left"></view>
			<view class="cover-right"></view>
			<view class="classification flex-cc flex-wrap">
				<view class="class-item flex-clo flex-cc" @click="" v-for="item in classList" :key="item.value">
					<image :src="item.icon"></image>
					<span>{{ item.label }}</span>
				</view>
			</view>
			<view class="content-list flex-clo">
				<view class="content-item flex-clo" style="margin-top: 70rpx;">
					<span class="title-area1">每 日 菜 单</span>
					<view class="swiper-panel">
						<swiper :display-multiple-items="2" next-margin="150rpx" :indicator-dots="false">
							<swiper-item v-for="item in dailyMenuList" :key="item.url">
								<view class="item">
									<image class="image" :src="item.url"></image>
									<i class="heart"><image style="width: 42rpx;height: 42rpx;" src="../../static/icons/Iconly-Light-Heart.png"></image></i>
								</view>
								
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view class="content-item flex-clo">
					<span class="title-area2">精 选 菜 单</span>
					<view class="list flex-clo ">
						<view class="list-item flex-cc" v-for="item in selectMenuList" :key="item.url">
							<image :src="item.url"></image>
							<view class="card-info flex-row">
								<view class="info">
									<view class="title flex-cc">{{ item.title }}</view>
									<view class="author flex-row">
										<image class="author-avatar" :src="item.author.url"></image>
										<span class="author-name">{{ item.author.name }}</span>
									</view>
								</view>
								<view class="flex-cc">
									<image style="width: 120rpx;height: 120rpx;"  src="../../static/icons/Iconly-Light-Add.png"></image>
								</view>
							</view>
						</view>
						<view class="null-box"></view>
					</view>
				</view>
			</view>
		</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
import topBar from '@/components/topBar/index.vue';
export default {
	components: {
		topBar
	},
	data() {
		return {
			navBarList: [
				{
					label: '推荐',
					value: 1,
					select: false
				},
				{
					label: '自制轻食',
					value: 2,
					select: true
				},
				{
					label: '好物分享',
					value: 3,
					select: false
				},
				{
					label: '线下店铺',
					value: 4,
					select: false
				}
			],
			classList: [
				{
					label: '沙拉',
					icon: '/static/icons/streamline-icon-food-kitchenware-fork-spoon@48x48.png',
					value: 1
				},
				{
					label: '烘焙',
					icon: '/static/icons/streamline-icon-food-water-melon@48x48.png',
					value: 2
				},
				{
					label: '家常菜',
					icon: '/static/icons/streamline-icon-food-kitchenware-fork-spoon@48x48.png',
					value: 3
				},
				{
					label: '主食',
					icon: '/static/icons/streamline-icon-food-baguette@48x48.png',
					value: 4
				},
				{
					label: '汤',
					icon: '/static/icons/streamline-icon-food-barbeque-pot@48x48.png',
					value: 5
				},
				{
					label: '甜点',
					icon: '/static/icons/streamline-icon-food-popcorn@48x48.png',
					value: 6
				}
			],
			dailyMenuList: [
				{
					url: 'https://p18.qhimg.com/bdm/1000_618_85/t014c62d42477f1fcf5.jpg'
				},
				{
					url: 'https://p16.qhimg.com/bdm/1000_618_85/t012665a1cac2a4b0d3.jpg'
				},
				{
					url: 'https://p18.qhimg.com/bdm/1000_618_85/t012f13c6b19476cd10.jpg'
				},
				{
					url: 'https://p15.qhimg.com/bdm/1000_618_85/t01705821e90d0a2d85.jpg'
				},
				{
					url: 'https://p18.qhimg.com/bdm/1000_618_85/t0151b92036db47cd23.jpg'
				}
			],
			selectMenuList: [
				{
					id: 1,
					title: '低GI减脂木瓜沙拉',
					author: {
						url: 'https://p18.qhimg.com/bdm/1000_618_85/t014c62d42477f1fcf5.jpg',
						name: '鹭鹭子和花花酱'
					},
					url: 'https://p17.qhimg.com/bdm/1000_618_85/t013adaf4ca8d40edbd.jpg'
				},
				{
					id: 2,
					title: '草莓水果沙拉',
					author: {
						url: 'https://p18.qhimg.com/bdm/1000_618_85/t014c62d42477f1fcf5.jpg',
						name: '33小仙女'
					},
					url: 'https://p17.qhimg.com/bdm/1000_618_85/t0139f1a9251fe0e4ce.jpg'
				}
			]
		};
	},
	onLoad() {},
	methods: {
		changeNavBar(index) {
			this.navBarList.forEach(item => {
				if (item.value == index) {
					item.select = true;
				} else {
					item.select = false;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	overflow: scroll;
	width: 100%;
	height: 100%;
	background: $-color-theme-3;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	overflow: hidden;
}
.top {
	width: 100%;
	height: 9%;
	margin-top: 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: row;
	.input {
		height: 70rpx;
		background: $-color-theme-2; 
		border-radius: 40rpx;
	}
}
.nav-bar {
	background: $-color-theme-3;
	width: 100%;
	position: absolute;
	z-index: 4;
	.nav-item {
		width: 20%;
		height: 70rpx;
		margin: 0 20rpx;
		padding: 6rpx;
		font-size: 24rpx;
		color: $-color-theme-4;
		text-align: center;
	}
	.nav-item-select {
		width: 20%;
		height: 70rpx;
		padding: 6rpx;
		border-radius: 20rpx 20rpx 0 0;
		background: $-color-theme-1;
		font-size: 24rpx;
		color: $-color-theme-3;
		text-align: center;
	}
}
.content {
	position: relative;
	width: calc(100% - 40rpx);
	height: 100%;
	z-index: 1;
	border-radius: 25rpx;
	overflow-x: scroll;
	.cover-left {
		z-index: 2;
		float: left;
		width: 50%;
		height: 100%;
		background: $-color-theme-1;
		border-radius: 25rpx 0 0 0;
	}
	.cover-right {
		z-index: 2;
		float: left;
		width: 50%;
		height: 100%;
		background: $-color-theme-2;
		border-radius: 0 25rpx 0 0;
	}
	.classification {
		top: 60rpx; 
		z-index: 4;
		position: absolute;
		width: 100%;
		height: 380rpx;
		border-radius: 25rpx 25rpx 150rpx 0;
		background: $-color-theme-1;
		.class-item {
			width: 30%;
			color: $-color-theme-3;
			image {
				width: 48rpx;
				height: 48rpx;
			}
			span {
				margin-top: 10rpx;
				font-size: 28rpx;
			}
		}
	}
	.content-list {
		overflow: hidden;
		z-index: 4;
		position: absolute;
		top: 440rpx;
		width: 100%;
		border-radius: 150rpx 40rpx 40rpx 40rpx;
		background: linear-gradient(to bottom, $-color-theme-2, $-color-theme-1);
		.content-item {
			width: 100%;
			margin-left: 70rpx;
			.title-area1 {
				width: 150rpx;
				border: 4rpx solid $-color-theme-3;
				border-radius: 45rpx;
				color: $-color-theme-3;
				font-size: 26rpx;
				font-weight: 600;
				text-align: center;
				padding: 6rpx;
				margin-bottom: 20rpx;
			}
			.title-area2 {
				width: 150rpx;
				border-radius: 45rpx;
				color: $-color-theme-4;
				border: 4rpx solid $-color-theme-6;
				background: $-color-theme-6;
				font-size: 26rpx;
				font-weight: 600;
				text-align: center;
				padding: 6rpx;
				margin-bottom: 20rpx;
			}
			.list {
				width: 100%;
				margin-left: -70rpx;
				.list-item {
					width: 100%;
					margin-bottom: 100rpx;
					position: relative;
					image {
						width: 460rpx;
						height: 520rpx;
						border-radius: 60rpx;
					}
					.card-info {
						justify-content: space-around;
						position: absolute;
						border-radius: 100rpx;
						padding-top: 20rpx;
						bottom: -60rpx;
						width: 460rpx;
						height: 180rpx;
						background: rgba($color: #ffffff, $alpha: 0.9);
						.info{
							display: flex;
							justify-content: flex-start;
							align-items: flex-start;
							flex-direction: column;
							margin-left: 40rpx;
							.title {
								width: 100%;
								color: $-color-theme-3;
								font-size: 36rpx;
								font-weight: 600;
								margin: 10rpx 0;
							}
							.author {
								justify-content: flex-start;
								align-items: flex-start;
								width: 100%;
								.author-name {
									font-size: 24rpx;
								}
								.author-avatar {
									width: 22rpx;
									height: 22rpx;
									margin-right: 20rpx;
									vertical-align: middle;
								}
							}
						}
						
					}
				}
			}
			.swiper-panel {
				width: 100%;
				.item{
					position: relative;
					width: 250rpx;
					height: 250rpx;
					border-radius: 45rpx;
					.image {
						width: 250rpx;
						height: 250rpx;
						border-radius: 45rpx;
					}
					.heart{
						position: absolute;
						bottom: 30rpx;
						right: 30rpx;
					}
				}
			}
		}
	}
}
</style>
